<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Edge Panel</title>
    <style>
        html, body {
            margin: 0;
            padding: 0;
            background: transparent;
            height: 100%;
            width: 100%;
            overflow: hidden;
        }

        #container {
            position: relative;
            background: white;
            width: 100%;
            height: 100%;
            box-shadow: -2px 0 5px rgba(0,0,0,0.1);
        }

        /* webview 最底层 */
        #webview-container {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
        }

        #webview {
            width: 100%;
            height: 100%;
            border: none;
        }

        /* 最上层鼠标感应区域 */
        #top-hover-detector {
            position: absolute;
            top: 0;
            left: 0;
            height: 5px;
            width: 100%;
            z-index: 1000;
            background: transparent;
            pointer-events: auto;
        }

        /* 标题栏 */
        #title-bar {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 32px;
            background-color: white;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 10px;
            border-bottom: 1px solid #ddd;
            -webkit-app-region: drag;
            opacity: 0;
            transition: opacity 0.3s ease;
            z-index: 999; /* 一定高于 webview */
        }

        #title-bar.visible {
            opacity: 1;
        }

        #left-controls, #right-controls {
            display: flex;
            align-items: center;
            margin-right: 8px;
            gap: 8px;
            -webkit-app-region: no-drag;
        }

        button {
            background: none;
            border: none;
            cursor: pointer;
            font-size: 14px;
            padding: 4px;
            -webkit-app-region: no-drag;
        }

        #opacity-range {
            width: 80px;
            -webkit-app-region: no-drag;
        }
    </style>
</head>
<body>
<div id="container">
    <div id="webview-container">
        <webview id="webview" allowpopups></webview>
    </div>

    <div id="top-hover-detector"></div>

    <div id="title-bar">
        <div id="left-controls">
            <button id="back">❮</button>
            <button id="forward">❯</button>
            <button id="reload" onclick="window.location.reload()">⭮</button>
        </div>
        <div id="webview-title" style="flex: 1; text-align: center; font-weight: bold; font-size: 14px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; pointer-events: none;">
            加载中...
        </div>
        <div id="right-controls">
            <input type="range" id="opacity-range" min="0" max="100" value="100" />
            <button id="win-sticky" onclick="winSticky()">📍</button>
            <button onclick="minimize()">➖</button>
            <button onclick="winClose()">❌</button>
        </div>
    </div>
</div>

<script>
    const urlParams = new URLSearchParams(window.location.search);
    const url = urlParams.get('url');
    const winName = urlParams.get('winName');

    const webview = document.getElementById('webview');
    webview.src = url.startsWith("http") ? url : "http://" + url;

    const backBtn = document.getElementById('back');
    const forwardBtn = document.getElementById('forward');
    const opacityRange = document.getElementById('opacity-range');
    const titleBar = document.getElementById('title-bar');
    const hoverArea = document.getElementById('top-hover-detector');
    const webviewTitle = document.getElementById('webview-title');

    webview.addEventListener('did-finish-load', async () => {
        const title = await webview.getTitle();
        webviewTitle.textContent = title || '无标题';
    });


    let hideTimeout = null;

    function showTitleBar() {
        titleBar.classList.add('visible');
        clearTimeout(hideTimeout);
        hideTimeout = setTimeout(hideTitleBar, 1000);
    }

    function hideTitleBar() {
        titleBar.classList.remove('visible');
    }

    // 鼠标进入顶部感应区域时显示
    hoverArea.addEventListener('mouseenter', showTitleBar);

    // 鼠标进入标题栏本身也要保持显示
    titleBar.addEventListener('mouseenter', () => {
        clearTimeout(hideTimeout);
        titleBar.classList.add('visible');
    });

    // 鼠标离开标题栏时开始计时隐藏
    titleBar.addEventListener('mouseleave', () => {
        hideTimeout = setTimeout(hideTitleBar, 1000);
    });

    opacityRange.addEventListener('input', (e) => {
        const val = e.target.value;
        const opacity = val / 100;
        document.body.style.opacity = opacity;
    });

    backBtn.addEventListener('click', () => {
        if (webview.canGoBack()) webview.goBack();
    });

    forwardBtn.addEventListener('click', () => {
        if (webview.canGoForward()) webview.goForward();
    });

    webview.addEventListener('new-window', (e) => {
        webview.src = e.url;
    });

    function minimize() {
        window.utools.sendToParent('minimize', winName);
    }

    function winSticky() {
        const button = document.getElementById('win-sticky');
        const isSticky = button.textContent === '📌';
        button.textContent = isSticky ? '📍' : '📌';
        window.utools.sendToParent('win-sticky', {winName:winName, isSticky:!isSticky});
    }

    function winClose() {
        window.utools.sendToParent('win-close', winName);
        window.close();
    }

    window.addEventListener('keydown', (event) => {
        if (window.api.checkShortcut(['Control', 'ArrowRight'])) {
            opacityRange.value = 100
            document.body.style.opacity = 1
        }

        if (window.api.checkShortcut(['Control', 'ArrowLeft'])) {
            opacityRange.value = 0
            document.body.style.opacity = 0
        }
    });

    window.electron.on('hide',(data) => {
        opacityRange.value = data * 100
        document.body.style.opacity = data
    })
</script>
</body>
</html>
